<!DOCTYPE html>
<!-- 定义文档类型 -->
<!-- html 全局属性 
    class,id,style,lang,title,accesskey,tabindex,
    H5:contenditable,contextmenu,data-*,
-->
<html lang="en" manifest="" xmlns="" dir="auto">

<style>
    /* 环形旋转动画 */
    @keyframes donut-spin {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .donut {
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        /* 环形带宽度 */
        border: 8px solid rgba(0, 0, 0, 0.1);
        border-left-color: red;
        border-right-color: green;
        border-top-color: blue;
        border-bottom-color: yellow;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        /* animation: donut-spin 1.0s linear infinite; */
        animation: donut-spin 1.0s linear 3;
    }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML- hyper text markup language</title>
    <!-- <script src="javascript.js"></script> -->
    <!-- <script src="jquery-3.3.1.min.js"></script> -->
    <link rel="stylesheet" href="css3.css" />
    <script>
        $(function () {
            console.debug("debug");
        })
    </script>
</head>

<body>
    <div class="donut">
        <span>宋</span>
    </div>
    <!-- <h1 style="background-color: red">this is h1</h1> -->
    <p>this is a pargraph</p>
    <!-- 水平线 -->
    <hr />
    <a href="https://www.baidu.com/">this is link to baidu </a>
    <!-- 换行 -->
    <br />
    <div id="SpecDiv">
        <img src="svg.svg" alt="no image"></img>
        <embed src="svg.svg" alt="no embed" pluginspage="url"></embed>
        <object src="svg.svg" alt="no object" codebase=""></object>
        <iframe src="svg.svg" alt="no object"></iframe>
    </div>
    <div>this is div</div>
    <div>
        <iframe style="width:500px;height:300px"
            src="http://api.yyxzpc.cn/mdparse/m3u8.php?id=https://cn2.zuidadianying.com/20181216/IdYeq4aP/index.m3u8"
            frameborder="0">
        </iframe>
    </div>

    <button>
    .up，.down 类，让它实现展开、合上的动画
    </button>
</body>

</html>